import 'dart:ui';

import 'package:ac/common/style.dart';
import 'package:ac/model/ac_blogger_model.dart';
import 'package:ac/model/ac_login_model.dart';
import 'package:ac/route/ac_route_pages.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'ac_post_list_logic.dart';

class AcPostListPage extends StatelessWidget {
  final logic = Get.find<AcPostListLogic>();
  final state = Get.find<AcPostListLogic>().state;

  AcPostListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      return Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("images/icon_post_detail_bg_${state.index}.png"),
            fit: BoxFit.fill,
          ),
        ),
        child: Stack(
          children: [
            Positioned(
              child: Obx(() {
                debugPrint('postList: ${logic.postList.toList().length}');
                return Container(
                  margin: EdgeInsets.only(
                    top: ScreenUtil().statusBarHeight + 46.h,
                  ),
                  child: GridView.builder(
                    padding: EdgeInsets.only(
                      top: 16.h,
                      left: 20.w,
                      right: 20.w,
                      bottom: ScreenUtil().bottomBarHeight + 16.h,
                    ),
                    itemBuilder: (context, index) {
                      var item = logic.postList[index];
                      var userInfo = logic.findBlogger(item);
                      return _postItem(item, userInfo);
                    },
                    itemCount: logic.postList.toList().length,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      mainAxisSpacing: 16.w,
                      crossAxisSpacing: 11.w,
                      childAspectRatio: 0.7,
                    ),
                  ),
                );
              }),
            ),
            _title(),
          ],
        ),
      );
    });
  }

  Widget _postItem(Post item, Userinfo? userInfo) {
    return GestureDetector(
      onTap: () {
        Get.toNamed(AcRouteNames.postDetail, arguments: {
          "post": item,
          "userInfo": userInfo,
        });
      },
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: const Color(0xFFCCCCCC),
            width: 0.5.w,
          ),
          borderRadius: BorderRadius.circular(8.r),
        ),
        child: Column(
          children: [
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(8.r),
                    topRight: Radius.circular(8.r),
                  ),
                  image: DecorationImage(
                    image: AssetImage(item.mainImage),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            Container(
                padding: EdgeInsets.all(10.w),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(8.r),
                      bottomRight: Radius.circular(8.r)),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      item.title.fixAutoLines(),
                      maxLines: 1,
                      style: TextStyle(
                        fontSize: 10.sp,
                        color: textColorBlack,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    SizedBox(height: 8.h),
                    Row(
                      children: [
                        GestureDetector(
                          onTap: () {
                            Get.toNamed(
                              AcRouteNames.userDetail,
                              arguments: userInfo?.userId,
                            );
                          },
                          child: ClipOval(
                            child: CachedNetworkImage(
                              imageUrl: userInfo?.avatar ?? "",
                              width: 20.w,
                              height: 20.w,
                            ),
                          ),
                        ),
                        SizedBox(width: 4.w),
                        Expanded(
                          child: Text(
                            (userInfo?.nickname ?? "").fixAutoLines(),
                            maxLines: 1,
                            style: TextStyle(
                              fontSize: 10.sp,
                              color: textColorBlack,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ),
                        SizedBox(width: 8.w),
                        Image.asset(
                          "images/icon_home_${item.isLiked ? "yes" : "no"}.png",
                          width: 15.w,
                          height: 15.w,
                        ),
                      ],
                    )
                  ],
                ))
          ],
        ),
      ),
    );
  }

  Positioned _title() {
    return Positioned(
      top: ScreenUtil().statusBarHeight,
      child: ClipRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 25.0, sigmaY: 25.0),
          child: Column(
            children: [
              Container(
                height: 1.h,
                width: 375.w,
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xFFFFC371), Color(0xFFFF5F6D)],
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                  ),
                ),
              ),
              Container(
                height: 44.h,
                width: 375.w,
                color: Colors.white.withOpacity(0.1),
                child: Stack(
                  children: [
                    Align(
                      alignment: Alignment.center,
                      child: Image.asset(
                        "images/icon_post_detail_title_${state.index}.png",
                        height: 22.h,
                      ),
                    ),
                    Positioned(
                      left: 20.w,
                      top: 0,
                      bottom: 0,
                      child: GestureDetector(
                        onTap: () {
                          Get.back();
                        },
                        child: Image.asset(
                          "images/back.png",
                          width: 20.w,
                          height: 16.h,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                height: 1.h,
                width: 375.w,
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xFFFFC371), Color(0xFFFF5F6D)],
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
